<template>
  <div class="left-chart-1" >
    <MyChart :options="lineOptions" v-if="chartVisiable" />
  </div>
</template>

<script>

import chartConfig from "./js/chartConfig";
import MyChart from "./widgets/MyChart";
export default {
  name: 'DetailChart1',
  components: {MyChart},
  props:{
    mdata:{
      require:true,
      type:Object
    }
  },
  data () {
    return {
      chartVisiable:false,
      lineOptions:{}
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart:function () {
      this.lineOptions=chartConfig.lineBar(this.mdata);
      this.chartVisiable=true;
    }
  }
}
</script>

<style lang="scss" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  padding: 20px 10px;
}
</style>
